package edu.stu.book.book.keeping.ui.screen.home

import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.unit.times
import androidx.navigation.NavHostController
import com.google.accompanist.pager.ExperimentalPagerApi
import edu.stu.book.book.keeping.R
import edu.stu.book.book.keeping.data.AddMenuItem
import edu.stu.book.book.keeping.ui.screen.home.add.CostScreen
import edu.stu.book.book.keeping.ui.screen.home.add.IncomeScreen
import edu.stu.book.book.keeping.utils.ColorUtils
import edu.stu.book.book.keeping.viewmodel.AddViewModel

@OptIn(ExperimentalPagerApi::class)
@Composable
fun AddScreen(
    navController: NavHostController,
    viewModel: AddViewModel = AddViewModel(),
    modifier: Modifier = Modifier
) {
    val context = LocalContext.current
    var selectIndex by rememberSaveable { mutableIntStateOf(0) }

    // 假设每个菜单项的宽度
    val itemWidth = 60.dp

    val underlineOffset =
        animateDpAsState(targetValue = selectIndex * itemWidth, label = "")

    Column(
        modifier = modifier.fillMaxSize()
    ) {
        Row(
            modifier
                .height(50.dp)
                .fillMaxWidth()
                .background(ColorUtils.getColor(context, R.color.main_color_20)),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.Center
        ) {
            AddMenuItem.forEachIndexed { index, item ->
                Box(
                    modifier = Modifier
                        .width(itemWidth) // 固定宽度
                        .clickable(
                            indication = null,
                            interactionSource = remember { MutableInteractionSource() }
                        ) {
                            selectIndex = index
                        },
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = item.title, fontSize = 18.sp, color = ColorUtils.getColor(context))
                }
            }
        }

        Box(
            modifier = Modifier
                .fillMaxWidth(),
            contentAlignment = Alignment.Center
        ) {
            // 用来调整下划线的位置
            Row(
                modifier = Modifier
                    .width(itemWidth * AddMenuItem.size),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.Start
            ) {
                Box(
                    modifier = Modifier
                        .offset(x = underlineOffset.value)
                        .width(itemWidth)
                        .height(2.dp)
                        .background(ColorUtils.getColor(context))
                )
            }
        }

        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            when (selectIndex) {
                0 -> CostScreen()
                1 -> IncomeScreen()
            }
        }
    }
}